<template>
  <div class="swipe-box">
    <van-swipe class="swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="image of images" :key="image.id">
        <img class="img" :src="image.url" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import {usePhoneStore} from '@/stores/phone';

const phoneStore = usePhoneStore();

const images = computed(() => phoneStore.phones.slice(0, 4).map(phone => ({
  id: phone.id,
  url: phone.image,
})));
</script>

<style scoped>
.swipe-box {
  height: 200px;
  flex-shrink: 0;
}
.swipe {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>